<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="下载记录"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 记录列表 -->

      <view v-for="item in recordsList" :key="item.id" class="record-item">
        <view class="record-info-row">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ item.createTime }}</text>
        </view>

        <view class="record-info-row">
          <text class="info-label">明细类型：</text>
          <text class="info-value">{{ item.type }}</text>
        </view>

        <view class="record-info-row">
          <text class="info-label">接收邮箱：</text>
          <text class="info-value">{{ item.email }}</text>
        </view>

        <view class="record-actions">
          <view class="action-btn resend-btn" @click.stop="handleResend(item)">
            <text>再次发送</text>
          </view>
          <view class="action-btn delete-btn" @click.stop="handleDelete(item)">
            <text>删除记录</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="recordsList.length === 0" class="empty-state">
        <text class="empty-text">暂无下载记录</text>
      </view>

      <!-- 创建按钮 -->
      <view class="create-button" @click="goToCreate">
        <text>创建下载任务</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 滚动高度
const scrollHeight = ref(0);

// 下载记录列表
const recordsList = ref([
  {
    id: 1,
    type: "订单/积分/退款/应收额",
    createTime: "2025年10月20日 14:02:58",
    email: "11111@qq.com",
  },
  {
    id: 2,
    type: "订单/积分",
    createTime: "2025年10月19日 10:15:30",
    email: "merchant@example.com",
  },
  {
    id: 3,
    type: "退款/应收额",
    createTime: "2025年10月18日 16:45:20",
    email: "test@qq.com",
  },
]);

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 跳转到创建下载页面
const goToCreate = () => {
  uni.navigateTo({
    url: "/pages/mine/financialData/createDownload",
  });
};

// 再次发送
const handleResend = (item) => {
  uni.showModal({
    title: "提示",
    content: `确认再次发送到 ${item.email} 吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: "发送成功",
          icon: "none",
        });
        // TODO: 实现再次发送功能
      }
    },
  });
};

// 删除记录
const handleDelete = (item) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该记录吗？",
    success: (res) => {
      if (res.confirm) {
        const index = recordsList.value.findIndex((r) => r.id === item.id);
        if (index > -1) {
          recordsList.value.splice(index, 1);
          uni.showToast({
            title: "删除成功",
            icon: "none",
          });
        }
        // TODO: 实现删除记录功能
      }
    },
  });
};

// 计算滚动区域高度
const calculateScrollHeight = () => {
  const systemInfo = uni.getSystemInfoSync();
  // 屏幕高度 - 导航栏高度 - 创建按钮高度 - 内边距
  scrollHeight.value = systemInfo.windowHeight - 88 - 88 - 40 - 20;
};

onMounted(() => {
  calculateScrollHeight();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 20rpx 30rpx;
}

// 记录列表
.records-list {
  margin-bottom: 20rpx;
}

.record-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
}

.record-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  &:last-of-type {
    margin-bottom: 32rpx;
  }
}

.info-label {
  font-size: 28rpx;
  color: #333;
  min-width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

// 记录操作
.record-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72rpx;
  border-radius: 12rpx;
  font-size: 28rpx;

  &:active {
    opacity: 0.8;
  }
}

.resend-btn {
  background-color: #fabc02;

  text {
    color: #fff;
  }
}

.delete-btn {
  background-color: #f94c4f;

  text {
    color: #fff;
  }
}

// 空状态
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 创建按钮
.create-button {
  position: fixed;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 700rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  background-color: #fabc02;
  border-radius: 50rpx;

  text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>
